<!-- 我 -->
<template>
	<view class="me">
		<!-- 搜索栏 -->
		<u-sticky offset-top="-88rpx">
			<view class="searchBar">
				<u-icon name="plus" size="22"></u-icon>
				<u-search class="searchInput" placeholder="搜索我的食谱" v-model="searchValue" shape="square"
					:showAction="false">
				</u-search>
				<text @click="gotoInstall">设置</text>
			</view>
		</u-sticky>
		<!-- 头像信息 -->
		<view class="info">
			<u--image class="image" src="https://cdn.uviewui.com/uview/album/1.jpg" width="160rpx" height="160rpx"
				shape="circle"></u--image>
			<view class="user">
				<view class="name">阿白</view>
				<u-tag class="tag" text="Lv.1" type="error"></u-tag>
			</view>
			<u-icon class="arrow" name="arrow-right" size="28" @click="goto"></u-icon>
		</view>
		<!-- 统计 -->
		<u-grid :border="true" class="statistics">
			<u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
				<text class="number">0</text>
				<text class="grid-text">{{ baseListItem.title }}</text>
			</u-grid-item>
		</u-grid>
		<!-- 个性签名 -->
		<text class="signature">这个人很懒~什么都没留下~</text>
		<u-line style="margin-top: 20rpx;" color="#f2f2f2"></u-line>
		<!-- 图标 -->
		<u-grid :border="false" col="4" @click="click">
			<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
				<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="40"></u-icon>
				<text>{{ listItem.title }}</text>
			</u-grid-item>
		</u-grid>
		<!-- 间隔槽 -->
		<u-gap height="20rpx" style="margin: 20rpx 20rpx;" bgColor="#f2f2f2"></u-gap>
		<u-sticky bgColor="#fff">
			<u-tabs :list="[{name: '食谱·0'}, {name: '作品·0'}]" lineWidth="30" lineColor="#f56c6c"
				:activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)' }"
				:inactiveStyle="{ color: '#606266', transform: 'scale(1)' }"
				itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 68rpx;"></u-tabs>
		</u-sticky>
		<u-empty mode="data" text="分享是一种美德 ~" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				baseList: [{
					title: '关注'
				}, {
					title: '粉丝'
				}, {
					title: '帮贡'
				}],
				list: [{
						name: 'star',
						title: '我的收藏'
					},
					{
						name: 'play-circle',
						title: '我的课程'
					},
					{
						name: 'clock',
						title: '浏览历史'
					},
					{
						name: 'file-text',
						title: '签到任务'
					}
				],
			};
		},
		methods: {
			// 跳转设置页面
			gotoInstall() {
				uni.navigateTo({
					url: '/pages/client/install'
				})
			},
			// 跳转个人信息
			goto() {
				uni.navigateTo({
					url: '/pages/client/userInfo'
				})
			},
			// 图标点击事件
			click(name) {
				if (name === 0) {
					uni.navigateTo({
						url: '/pages/client/collect'
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.me {
		font-size: 24rpx;
		.searchBar {
			display: flex;
			justify-content: space-around;
			padding: 20rpx;
			align-items: center;

			.searchInput {
				width: 525rpx;
				flex: unset;
			}
		}

		.info {
			display: flex;
			align-items: center;

			.image {
				margin: 20rpx;
			}

			.user {
				margin-left: 20rpx;

				.name {
					font-size: 50rpx;
					margin-bottom: 20rpx;
					font-weight: bold;
				}

				.tag {
					width: 65rpx;
				}
			}

			.arrow {
				position: absolute;
				right: 20rpx;
			}
		}

		.statistics {
			margin: 20rpx 0;
			width: 70%;

			.number {
				font-weight: bold;
			}

			.grid-text {
				color: #999999;
			}
		}

		.signature {
			padding-left: 20rpx;
			color: #999999;
		}

		.u-tabs {
			align-items: center;
		}
	}
</style>
